import { useCatStore } from '@/store/CatStore'
import { shallow } from 'zustand/shallow'

export const CatBox2 = () => {
  // const bigCats = useCatStore(state => state.cats.bigCats)
  // const total = useCatStore.use.total()
  // const increaseBigCats = useCatStore.use.increaseBigCats()

  // const { bigCats, total, increaseBigCats } = useCatStore(state => {
  //   return {
  //     bigCats: state.cats.bigCats,
  //     total: state.total,
  //     increaseBigCats: state.increaseBigCats
  //   }
  // }, shallow)

  const [bigCats, total, increaseBigCats, resetStorage] = useCatStore(
    state => [
      state.cats.bigCats,
      state.total,
      state.increaseBigCats,
      state.resetStorage
    ],
    shallow
  )

  return (
    <div className="box">
      <h1>CatBox2</h1>
      <p>{Math.random()}</p>
      <p>total: {total}</p>
      <p>big cats: {bigCats}</p>
      <button onClick={increaseBigCats}>add Bigcat</button>
      <button onClick={resetStorage}>clear storage</button>
    </div>
  )
}
